<template>
	<view>
		<scroll-view scroll-y class="scrollView">
			<block  v-for="(item,index2) in townList" :key="index2">
				<view class="dataView">
						<view class="dataViewNav"><text>{{item.townName}}</text><text @click="goNext(index2)">查看更多</text></view>
						<view class="dataViewBox">
							<block v-for="(data,index3) in item.children[0]" :key="index3">
								<text @click="chooseFarm(data.farmName,data.farmId)">{{data.farmName}}</text>
							</block>
						</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data () {
			return {

			}
		},
		props: {
			townList: {
				type: Array
			},
			villageListData: {
				type: Array
			},
		},
		computed: {
			
		},
		onLoad() {
			
		},
		methods: {
			goNext (index2) {
				//this.$emit("goNext",this.$props.townList[index2].townName)
				this.$emit("goNext",index2)
			},
			
			//政府兽医选择养殖场查看
			chooseFarm(farmName,farmId) {
				console.log(farmName,farmId)
				uni.navigateTo({
					url: '../../pages/rear/governmentAndVeterinary/farm?farmName=' + farmName + '&farmId=' + farmId
				})
			},
		}
	}
</script>

<style lang="less">
	@import "../../common/global.less";
	@import "../../common/animate.css";
	@import "../../common/iconfont.css";
	@import "../../common/uni.css";
	//选项下方区域
	 .scrollView{
		 width: 98%;
		 margin: auto;
		 height: 100%;
	 }
	 //选项卡内容
	 .dataView{
	  // width: 90%;
	  margin:20rpx auto;
	  border-radius: 30rpx;
		}
	 .dataViewNav{
		 padding:0rpx 20rpx;
		 font-size: 35rpx;
		 display: flex;
		 justify-content: space-between;
		 height:80rpx;
		 border-bottom: 1rpx solid #f4f4f4;
		  >text:nth-of-type(1){
			  color:#4AC997;
			  border-bottom: 5rpx solid #4AC997;
			  height: 60rpx;
		  }
		 >text:nth-of-type(2){
			 font-size: 30rpx;
			 color: #007AFF;
			 }
	 }
	 .dataViewBox{
		   min-height:250rpx;
		   display: flex;
		   flex-direction:row;
		   flex-wrap:wrap;
		   align-items: center;
		   // justify-content: center;
		   align-content:space-around;
		   border-bottom: 1rpx solid #dfdfdf;
		  >text{ 	
			 border-radius: 50rpx;
			   min-width: 170rpx;
			   text-align: center;
			   background-color: #EBEDF4;
			   color: #6E6E6E;
			   margin: 20rpx;
			   padding: 10rpx 15rpx;
			   letter-spacing: 4rpx;
			   }
	 }
	 
	.centerFlexLayout { 
		display:flex;
		flex-direction:column;
		align-items: center;
		justify-content: center;
	}

	.options{
		height:650rpx;
		width: 100%;
		display: flex;
		flex-wrap:wrap;
		justify-content: center;
		>view{ height:280rpx; width:340rpx; border-radius: 25rpx; margin: 10rpx;.centerFlexLayout;
		image{ height: 120rpx;width:120rpx;}
		 text{ color:#FFFFFF; padding-top: 20rpx;}}
		>view:nth-of-type(1) {background: linear-gradient(to bottom, #6CC0FD, #4499D8);
		image{ height: 100rpx;width:100rpx;}
		}
		>view:nth-of-type(2) {background: linear-gradient(to bottom, #F4AE7D, #FF7748);}
		>view:nth-of-type(3) { background: linear-gradient(to bottom, #44C393, #57BF5F); width:700rpx}
		}
	.scanModel{ height: 450rpx;
	.centerFlexLayout;
	>image{ height:180rpx; width:180rpx;}
	>text { color:@fontcolorthree; margin-top: 30rpx; font-size: 35rpx; letter-spacing: 2rpx;}
	}
</style>
